<template>
  <div style="padding:20px">
    <div class="three-one-header">
      <span style="font-size: large;font-weight: bolder;">我的上传:</span>
      <el-input placeholder="请输入搜索关键词" v-model="input" size="small" clearable prefix-icon="el-icon-search"
        @keyup.enter.native="searchupload">
        <el-button slot="append" size="small" type="primary" plain @click="searchupload">
          搜索
        </el-button>
      </el-input>
      <el-dropdown size="small">
        <span class="el-dropdown-link">
          &emsp;筛选&emsp;&emsp;
          <i class="el-icon-arrow-down el-icon--right" style="margin-right:10px;"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-radio label="私有" v-model="label">私有文档</el-radio>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-radio label="公开" v-model="label">公开文档</el-radio>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="three-one-body">
      <div style="margin-top:20px;display: flex;width: 100%;height: 100%;flex-wrap: wrap;overflow:auto;">
        <template v-for="(item,index) in fileForm">
          <div  :key="index" style="height:170px;width:130px;margin-right:10px"
            v-if="item.flag===label">
            <div style="height:70px;width:60px;margin:0 auto">
              <img :src="require('@/assets/image/myself/'+matchfileSuffixType(item.fileSuffix)+'.png')" alt=""
                style="width: 60px;height: 62px;">
            </div>
            <div style="text-align: center;overflow:hidden;white-space: nowrap;text-overflow: ellipsis">
              <span style="font-size:12px;">{{item.fileName}}</span>
            </div>
            <div style=" margin-top:5px;font-size:15px; font-weight: bold; height:25px; line-height:25px;">
              <span style="margin-left:10px;">状态:&nbsp;</span>
              <el-tooltip placement="top">
                <div slot="content"><span v-for="(sec,index) in item.depts" :key="index">{{sec}}<br></span></div>
                <span style="color:rgb(22, 155, 213)">{{item.flag}}</span>
              </el-tooltip>
              <button class="btn-change" @click="changeFileType(item.fileId)">更改</button>
            </div>
            <div style="margin-top:10px;">
              <button class="btn-preview" @click="filePreview(item.fileId)">预览</button>
              <button class="btn-download" @click="fileDownload(item.fileId,item.fileName,item.fileSuffix)">下载</button>
            </div>
          </div>
        </template>
        
        <!-- 更改 -->
        <!-- 公开文档对话框 -->
        <el-dialog :visible.sync="publicVisible" class="my-dialog-css" :modal-append-to-body="false">

          <!-- 中间单选 -->
          <div class="middle">
            <div style="position: absolute; width: 120px">
              <el-radio-group v-model="radio">
                <el-radio :label="4" @change="noneCheckbox">仅自己可见</el-radio>
                <el-radio :label="1" @change="noneCheckbox" style="margin-top: 50px;">所有人可见</el-radio>
                <el-radio :label="2" @change="firstCheckbox" style="margin-top: 50px;">仅部分可见</el-radio>
                <el-radio :label="3" @change="secondCheckbox" style="margin-top: 50px;">谁不可见</el-radio>

              </el-radio-group>
            </div>
          </div>
          <!-- 右侧多选 -->
          <div class="right">
            <div id="modal1" class="selectbox1">
              <el-checkbox-group class="checkbox-inline" v-model="dept" v-for="item in departmentArr" :key="item">
                <el-checkbox :label="item" :key="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div id="modal2" class="selectbox2">
              <el-checkbox-group class="checkbox-inline" v-model="noDept" v-for="item in departmentArr" :key="item">
                <el-checkbox :label="item" :key="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" class="confirm-button" @click="showSecondConfirmDialog">确 定</el-button>
            <el-button type="warning" class="cancel-button" @click="publicVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>

</template>
<script>
 import { getMyuploadData, getMyuploadSearch, putchangeFileType, getDeptList,getFileDownload, putchangeFileType1} from "@/api/myself/myself";
  export default {
    data() {
      return {
        input: '',
        label: '公开',
        userId: 1,
        // fileName:['帅saasfdasfsdfasdfasdfsfsdafsfsfs哥.doc','你asdfasdfsaas好.pdf','word.txt','word.docx','word.ppt','word.xls','word.zip',]
        fileForm: [{
          fileName: '帅saasfdasfsdfasdfasdfsfsdafsfsfs哥',
          fileSuffix: 'doc',
          flag: '公开',
          fileId: 160,
          depts: ['事业部1', '事业部二', '事业部二', '事业部二', '事业部二', '事业部二'],
        }, {
          fileName: 'word',
          fileSuffix: 'xls',
          flag: '公开',
          fileId: 2,
          depts: ['事业部1', '事业部二', '人资部门'],
        }, {
          fileName: '你asdfasdfsaas好',
          fileSuffix: 'pdf',
          fileId: 3,
          flag: '私有',
          depts: ['仅自己可见'],
        }, ],
        radio: 1,
        fileAttribute: 1,
        fileIdFlag: '',
        departmentArr: [
          "xx1事业部",
          "xx2事业部",
          "xx3事业部",
          "xx4事业部",
          "xx5事业部",
          "数据测试",
        ],
        dept: [],
        noDept: [],
        publicVisible: false,
        jump: 0,
      }
    },

    methods: {
      // 搜索功能
      searchupload() {
        let data = {
          inputString: this.input,
          userId: localStorage.userId
        }
        getMyuploadSearch(data)
          .then((res) => {
            // console.log(res);
            this.fileForm = [];
            for (let i in res.data) {
              this.fileForm.push(res.data[i]);
              if (this.fileForm[i].flag === '仅我可见')
                this.fileForm[i].flag = '私有';
              else 
                this.fileForm[i].flag = '公开';
            }
            console.log(this.fileForm)
          }).catch((err) => {
            console.log(err);
          })
      },
      // 预览方法
      filePreview(fileId) {
        this.$router.push({
          path: '/docdetail',
          query: {
            id: fileId
          }
        })
      },
      // 更改文件类型按钮
      changeFileType(fileId) {
        this.publicVisible = true;
        this.fileIdFlag = fileId;
        getDeptList('')
          .then((res) => {
            console.log(res);
            this.departmentArr = [];
            for (let i in res.data) {
              this.departmentArr.push(res.data[i])
            }
          })
      },
      //多选框显示
      noneCheckbox() {
        document.getElementById("modal1").style.display = "none";
        document.getElementById("modal2").style.display = "none";
        this.fileAttribute = 1;
      },
      firstCheckbox() {
        document.getElementById("modal1").style.display = "block";
        document.getElementById("modal2").style.display = "none";
        this.fileAttribute = 2;
      },
      secondCheckbox() {
        document.getElementById("modal1").style.display = "none";
        document.getElementById("modal2").style.display = "block";
        this.fileAttribute = 2;
      },
      //回跳初始状态
      backJump() {
        this.publicVisible = false;
        this.privateVisible = false;
        this.jumpVisible = false;
      },
      //跳转我的文档模块 +-+
      jumpToMyDoc() {
        //this.$router.push("/upload");
      },
      //二次确认
      async showSecondConfirmDialog() {
        const url = require("@/assets/image/myself/warn.png");
        if (this.radio == 1) {
          const confirmRes = await this.$confirm(
            "<img src=" +
            url +
            "><p>请您再次确认更改文件类型为：<br>全部可见吗？</p>",
            "", {
              dangerouslyUseHTMLString: true,
              customClass: "messageBox_class",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "btn-custom-cancel",
              confirmButtonClass: "btn-custom-confirm",
              center: true,
              showClose: false,
              type: "warning",
            }
          ).catch((err) => err); //用catch来捕获错误消息
          if ("confirm" === confirmRes) {
            //用户点击了确认
            //0私有1公共2部分
            // formData11.append('userId', localStorage.userId)
            // formData11.append('fileId', this.fileIdFlag)
            // formData11.append('fileType', 1)
            // formData11.append('deptNameList', this.dept)
            this.dept = [];
            var formData11 = {}
            formData11['userId'] = localStorage.userId
            formData11['fileId'] = this.fileIdFlag
            formData11['fileType'] = 1
            formData11['deptNameList'] = this.dept
            var data = JSON.stringify(formData11)
            console.log(data)
            putchangeFileType1(data).then((res) => console.log(res))
          }
        } else if (this.radio == 4) {
          const confirmRes = await this.$confirm(
            "<img src=" +
            url +
            "><p>请您再次确认更改文件类型为：<br>仅自己可见吗？</p>",
            "", {
              dangerouslyUseHTMLString: true,
              customClass: "messageBox_class",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "btn-custom-cancel",
              confirmButtonClass: "btn-custom-confirm",
              center: true,
              showClose: false,
              type: "warning",
            }
          ).catch((err) => err); //用catch来捕获错误消息
          if ("confirm" === confirmRes) {
            //用户点击了确认
            this.dept = [];
            var formData11 = {}
            formData11['userId'] = localStorage.userId
            formData11['fileId'] = this.fileIdFlag
            formData11['fileType'] = 0
            formData11['deptNameList'] = this.dept
            var data = JSON.stringify(formData11)
            console.log(data)
            putchangeFileType1(data).then((res) => console.log(res))
          }
        } else if (this.radio == 2) {
          const confirmRes = await this.$confirm(
            "<img src=" +
            url +
            `><p>请您再次确认更改文件类型为：<br>仅<span style="color:red">${this.dept}</span>可见？</p>`,
            "", {
              dangerouslyUseHTMLString: true,
              customClass: "messageBox_class",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "btn-custom-cancel",
              confirmButtonClass: "btn-custom-confirm",
              center: true,
              showClose: false,
              type: "warning",
            }
          ).catch((err) => err); //用catch来捕获错误消息
          if ("confirm" === confirmRes) {
            //用户点击了确认
            var formData11 = {}
            formData11['userId'] = localStorage.userId
            formData11['fileId'] = this.fileIdFlag
            formData11['fileType'] = 2
            formData11['deptNameList'] = this.dept
            var data = JSON.stringify(formData11)
            console.log(data)
            putchangeFileType1(data).then((res) => console.log(res))
          }
        } else {
          this.dept = [];
          this.departmentArr.forEach((a) => {
            let c = this.noDept.findIndex((b) => a === b);
            if (c > -1);
            else this.dept.push(a);
          });
          console.log(this.dept);
          const confirmRes = await this.$confirm(
            "<img src=" +
            url +
            `><p>请您再次确认更改文件类型为：<br>仅<span style="color:red">${this.noDept}</span>不可见？</p>`,
            "", {
              dangerouslyUseHTMLString: true,
              customClass: "messageBox_class",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              cancelButtonClass: "btn-custom-cancel",
              confirmButtonClass: "btn-custom-confirm",
              center: true,
              showClose: false,
              type: "warning",
            }
          ).catch((err) => err); //用catch来捕获错误消息
          if ("confirm" === confirmRes) {
            //用户点击了确认
            var formData11 = {}
            formData11['userId'] = localStorage.userId
            formData11['fileId'] = this.fileIdFlag
            formData11['fileType'] = 2
            formData11['deptNameList'] = this.dept
            var data = JSON.stringify(formData11)
            console.log(data)
            putchangeFileType1(data).then((res) => console.log(res))

          }
        }
      },

      // 下载文件 
      fileDownload(fileId, fileName, fileSuffix) {
        let data = {
          userId: localStorage.userId,
          fileId: fileId
        }
        getFileDownload(data)
          .then((res) => {
            if (res.size === 0) {
              this.$message({
                message:'你的文件丢失了',
                type:'error'
              })
              return;
           }
            const blob = new Blob([res], {
              type: ' application/octet-stream'
            });
            if ('download' in document.createElement('a')) { //非Ie下载
              let fileLink = document.createElement('a');
              let fileURL = window.URL.createObjectURL(blob);
              fileLink.href = fileURL;
              fileLink.setAttribute('download', fileName + '.' + fileSuffix)
              document.body.appendChild(fileLink);
              fileLink.click();
              window.URL.revokeObjectURL(fileLink.href); //释放URL对象
              document.body.removeChild(fileLink);
            } else {
              navigator.msSaveBlob(blob, fileName)
            }
            console.log(res);
          }).catch((err) => {
            console.log(err);
          })
      },
    },
    created() {
      let data = {
        userId: localStorage.userId,
      }
      // 获取我的上传界面数据
      getMyuploadData(data)
        .then((res) => {
          console.log(res);
          this.fileForm = [];
          for (let i in res.data) {
            this.fileForm.push(res.data[i]);
            if (this.fileForm[i].flag === '仅我可见')
              this.fileForm[i].flag = '私有';
            else 
              this.fileForm[i].flag = '公开';
          }
          console.log(this.fileForm)
        }).catch((err) => {
          console.log(err);
        })
    }
  }
</script>
<style lang="less">
  .el-checkbox-group {
    text-align: left;
  }

  .el-radio-group {
    text-align: left;
  }

  .selectbox2 {
    .el-checkbox__input {
      width: 18px;
      height: 18px;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: url(@/assets/image/myself/x.png) no-repeat center;
      border: 1px solid white;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 10px;
      background-size: 17px;
      vertical-align: middle;
      color: white;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner::after {
      content: none;
    }
  }

  .my-dialog-css {
    .el-dialog {
      height: 420px;
      width: 400px;
      overflow: hidden;
    }

    .el-dialog__headerbtn {
      font-size: 40px;
      top: 0px;
    }

    .el-icon-close {
      color: white !important;
    }

    .el-dialog {
      border: 2px solid gray;
      border-radius: 9px;
    }

    .el-dialog__header {
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      height: 45px;
      background: rgb(0, 178, 129);
      border-bottom: 2px solid gray;
      width: 100%;
      text-align: center;
      color: #666;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
  }

  .messageBox_class {
    width: 320px;
    height: 360px;
    border: 4px solid orange;
    background-color: whitesmoke;

    .el-message-box__header {
      height: 0;
    }

    .el-message-box__headerbtn .el-message-box__close {
      color: #3a3d46;
    }

    .el-message-box__status.el-icon-warning {
      display: none;
    }

    .el-message-box__status+.el-message-box__message {
      padding: 0;
      margin: 0;
    }

    .el-message-box__message p {
      text-align: center;
      color: black;
      margin-top: 30px;
    }
  }

  .btn-custom-cancel {
    float: right;
    margin-right: 20px;
    margin-top: 60px;
    width: 100px;
    height: 30px;
    line-height: 5px;
    background-color: orange;
    color: white;
  }

  .btn-custom-confirm {
    margin-right: 20px;
    margin-top: 60px;
    width: 100px;
    height: 30px;
    line-height: 5px;
  }
</style>
<style scoped>
  .three-one-header {
    height: 32x;
    margin: 10px 40px;
  }

  .el-input {
    width: 300px;
    margin-left: 200px;
    border-radius: 20%;
  }

  .el-button {
    color: rgb(22, 155, 213);

  }

  .el-dropdown {
    height: 30px;
    width: 120px;
    float: right;
    margin-right: 40px;
    font-weight: bold;
    font-size: medium;
    color: black;
    line-height: 30px;
    border: 1px solid rgb(121, 121, 121);
  }

  .three-one-body {
    width: 100%;
    height: 100%;
    margin-top: 30px;
  }

  .btn-preview {
    height: 25px;
    width: 40px;
    float: left;
    background-color: rgb(0, 178, 129);
    margin-left: 20px;
    border-style: none;
    font-weight: bold;
    color: aliceblue;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn-download {
    height: 25px;
    width: 40px;
    float: right;
    background-color: rgb(22, 155, 213);
    margin-right: 20px;
    border-style: none;
    font-weight: bold;
    color: aliceblue;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn-change {
    height: 25px;
    width: 45px;
    float: right;
    border-style: none;
    background-color: rgb(255, 179, 84);
    font-weight: bold;
    color: aliceblue;
    border-radius: 5px;
    cursor: pointer;
  }

  .confirm-button {
    margin-right: 30px;
    width: 100px;
    height: 30px;
    line-height: 5px;
  }

  .cancel-button {
    margin-right: 40px;
    width: 100px;
    height: 30px;
    line-height: 5px;
  }

  .middle {
    margin: 0;
    height: 250px;
  }

  .right {
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    height: 250px;
  }

  .selectbox1 {
    border: 1px solid gray;
    display: none;
    width: 120px;
    height: 100px;
    margin-top: 60px;
    overflow: auto;
    padding-left: 10px;
  }

  .selectbox2 {
    border: 1px solid gray;
    display: none;
    width: 120px;
    height: 100px;
    margin-top: 150px;
    overflow: auto;
    padding-left: 10px;
  }
</style>